SPA和SSR

2026-02-01

"不同的前端方案"

前言

自前后端分离流行以来，前端的主流方案有两种，一种叫 SPA，另一种叫 SSR，本文简述二者的概念与区别。

SPA，Single Page Application，即单页面应用。根据渲染的位置来看，也可以称其为客户端渲染（CSR，Client Side Render）。

和传统的前后端不分离的模板引擎（比如 Java 的 Thymeleaf 或者 Python 的 Jinja）不同，SPA 的原理是：浏览器初次请求只加载一个 HTML 壳子和 JS 脚本。

后续所有的页面跳转和数据更新都通过 Ajax/Axios 请求后端的 JSON API，由前端动态渲染 DOM，这也就是“单页面”名称的由来，只有一个 HTML 页面，后续全靠 JS 更新，传统模板引擎与之相对，可以被称为 MPA，即多页面应用。

也就是说，所有的数据更新导致的页面控件变化，全部由客户端浏览器的 JavaScript 请求并更新。

页面加载会很流畅，没有页面刷新，传统的模板引擎，在提交表单后，会需要刷新整个页面，但是 SPA 可以通过 JS 和后端接口交互获取到的新数据，动态+局部的更新到当前页面，无需刷新整个页面。

SPA 更加适合有着复杂交互逻辑的后台系统，JS 可以发挥很大的作用，实现一些复杂的页面交互，比如：多级表单弹窗，表格的多条件筛选和排序，切换 tab 不刷新页面，实时搜索，实时监控等。

复杂的 UI 交互，在传统的模板引擎里是很难实现的，往往需要大量的手动 DOM 操作，控件状态管理异常复杂。

首次加载会很慢，因为需要加载很多 JS 文件

SEO 不友好，因为所有 HTML 元素都是 JS 代码实时计算、请求、渲染出来的。

客户端渲染压力大，在一些性能低的客户端会表现得很卡顿。

SSR，Server-Side Rendering，即服务端渲染，页面在服务器端生成完整 HTML 后返回给浏览器。

执行流程是：

首屏加载快

SEO 非常友好

更利于内容型网站

服务器压力大

架构复杂

部署成本高